<template>
  <el-dialog
    title="请填写发票信息"
    :visible.sync="dialogVisible"
    width="95%"
    top="5%">
    <div id="invoive-info-form">
      <div style="display: flex; text-align: center; width: 90%; margin: 0px auto; height: 40px;line-height: 30px;">
        <div style="flex: 1">
          <el-button :type="form.type===0?'success':'info'" @click="changeType(0)">个人</el-button>
        </div>
        <div style="flex: 1">
          <el-button :type="form.type===1?'success':'info'" @click="changeType(1)">公司</el-button>
        </div>
      </div>
      <el-form :model="form" ref="myForm" label-width="100px" v-if="form.type===0" :rules="rules">
        <el-form-item
          class="able-select"
          label="个人姓名"
          prop="name">
          <el-input v-model.trim="form.name"/>
        </el-form-item>
        <el-form-item
          class="able-select"
          label="收票人手机号"
          prop="receiverMobile"
          type="textarea">
          <el-input v-model.trim="form.receiverMobile"/>
        </el-form-item>
        <el-form-item
          class="able-select"
          label="收票人邮箱"
          prop="receiverEmail"
          type="textarea">
          <el-input v-model.trim="form.receiverEmail"/>
        </el-form-item>
      </el-form>
      <el-form :model="form" ref="myForm" :rules="rules" label-width="100px" v-if="form.type===1">
        <el-form-item
          class="able-select"
          label="企业名称"
          prop="companyName">
          <el-input v-model.trim="form.companyName"/>
        </el-form-item>
        <el-form-item
          class="able-select"
          label="纳税人识别号"
          prop="number">
          <el-input v-model.trim="form.number"/>
        </el-form-item>
        <el-form-item
          class="able-select"
          label="注册地址"
          prop="address"
          type="textarea">
          <el-input v-model.trim="form.address"/>
        </el-form-item>
        <el-form-item
          class="able-select"
          label="注册电话"
          prop="mobile"
          type="textarea"
        >
          <el-input v-model="form.mobile"/>
        </el-form-item>
        <el-form-item
          class="able-select"
          label="开户行"
          prop="bank"
          type="textarea"
        >
          <el-input v-model.trim="form.bank"/>
        </el-form-item>
        <el-form-item
          class="able-select"
          label="开户行账号"
          prop="bankAccount"
          type="textarea"
        >
          <el-input v-model.trim="form.bankAccount"/>
        </el-form-item>
        <el-form-item
          class="able-select"
          label="收票人手机号"
          prop="receiverMobile"
          type="textarea"
        >
          <el-input v-model.trim="form.receiverMobile"/>
        </el-form-item>
        <el-form-item
          class="able-select"
          label="收票人邮箱"
          prop="receiverEmail"
          type="textarea"
        >
          <el-input v-model.trim="form.receiverEmail"/>
        </el-form-item>
      </el-form>
    </div>
    <div slot="footer" class="dialog-footer">
      <!--      <el-button type="primary" @click="setDemo()">例子数据</el-button>-->
      <el-button type="primary" @click="confirm(true)">清除</el-button>
      <el-button type="primary" @click="confirm(false)">确认选择</el-button>
    </div>
  </el-dialog>

</template>

<script>
export default {
  name: 'ChooseInvoiceInfoDialog',
  data: function () {
    let $this = this
    var checkReceiverMobile = function (rule, value, callback) {
      var regExp = /^1[3456789]\d{9}$/;
      if (regExp.test(value)) {
        callback()
      } else {
        callback(new Error('收票人手机号 格式错误'))
      }
    }
    var checkMobile = function (rule, value, callback) {
      var currStr=value+''
      var regExp1 = /^((0\d{2,3})-)(\d{7,8})$/;
      var regExp2 = /^1[3456789]\d{9}$/;
      if (regExp1.test(currStr) || regExp2.test(currStr)) {
        callback()
      } else {
        callback(new Error('格式错误 必须为座机/手机号码'))
      }
    }
    var checkEmail = function (rule, value, callback) {
      if ($this.checkEmail(value)) {
        callback()
      } else {
        callback(new Error('收票人邮箱 格式错误'))
      }
    }
    var identification=function (rule, value, callback) {
      const reg = /[0-9A-HJ-NPQRTUWXY]{2}\d{6}[0-9A-HJ-NPQRTUWXY]{10}/
      if (!reg.test(value)) {
        callback(new Error('纳税人识别号 错误'))
      } else {
        callback()
      }
    }
    var checkBankCard=function (rule, value, callback) {
      var currStr=value+''
      var regExp = /^[0-9]{16,20}$/;
      if (!regExp.test(currStr)) {
        callback(new Error('必须为纯数字长度在(16,20)位之间'))
      } else {
        callback()
      }
    }
    return {
      callback: null,
      dialogVisible: false,
      typeArr: ['个人', '企业'],
      form: {
        type: 0,
        typeName: '个人',
        name: '',
        companyName: '',
        number: '',
        mobile: '',
        bank: '',
        bankAccount: '',
        address: '',
        addressMobile: '',
        receiverMobile: '',
        receiverEmail: ''
      },
      rules: {
        name: [
          {required: true, message: '个人姓名 不能为空', trigger: ['blur','change']},
          {min: 2, max: 20, message: '个人姓名 长度必须在(2,10)位之间', trigger: ['blur','change']}
        ],
        companyName: [
          {required: true, message: '企业名称 不能为空', trigger: ['blur','change']},
          {min: 2, max: 30, message: '企业名称 长度必须在(2,30)位之间', trigger: ['blur','change']}
        ],
        number: [
          {required: true, message: '纳税人识别号 不能为空', trigger: ['blur','change']},
          {validator: identification, trigger: ['blur','change']}
        ],
        address: [
          {required: true, message: '注册地址 不能为空', trigger: ['blur','change']},
          {min: 5, max: 100, message: '注册地址 长度必须在(5,100)位之间', trigger: ['blur','change']}
        ],
        mobile: [
          {required: true, message: '注册电话 不能为空', trigger: ['blur','change']},
          {validator: checkMobile, trigger: ['blur','change']}
        ],
        bank: [
          {required: true, message: '开户行 不能为空', trigger: ['blur','change']},
          {min: 5, max: 30, message: '开户行 长度必须在(5,30)位之间', trigger: ['blur','change']}
        ],
        bankAccount: [
          {required: true, message: '开户行账号 不能为空', trigger: ['blur','change']},
          {validator:checkBankCard, trigger: ['blur','change']}
        ],
        // 公司
        receiverMobile: [
          {required: true, message: '收票人手机号 不能为空', trigger: ['blur','change']},
          {validator: checkReceiverMobile, trigger: ['blur','change']}
        ],
        receiverEmail: [
          {required: true, message: '收票人邮箱 不能为空', trigger: ['blur','change']},
          {validator: checkEmail, trigger: ['blur','change']}
        ],
      }
    }
  },
  watch: {},
  mounted() {
    let $this = this
    $this.bus.$on('BackKeyCallBus', function () {
      $this.dialogVisible = false
      $this.$forceUpdate()
    })
    $this.bus.$on('ChooseInvoiceInfoDialogCallBus', function (form, callback) {
      $this.init(form.typeName)
      $this.dialogVisible = true
      $this.callback = callback

      if (form.name) {
        $this.form.name = form.name
        $this.form.address = form.address
        $this.form.mobile = form.mobile
        $this.form.bank = form.bank
        $this.form.bankAccount = form.bankAccount
        $this.form.number = form.number
        $this.form.receiverMobile = form.receiverMobile
        $this.form.receiverEmail = form.receiverEmail
      }
      if (form.type===1){
        $this.form.companyName=form.name
      }
      $this.$forceUpdate()
    })

  },
  methods: {
    init: function (typeName) {
      this.form = {
        type: 0,
        typeName: '个人',
        name: '',
        number: '',
        mobile: '',
        bank: '',
        bankAccount: '',
        address: '',
        addressMobile: '',
        receiverMobile: '',
        receiverEmail: ''
      }
      if (typeName === '企业') {
        this.form.type = 1
        this.form.typeName = typeName
      }
      let $this = this
      setTimeout(function () {
        $this.$refs.myForm.clearValidate()
      }, 1000)
    },
    changeType: function (type) {
      this.form.type = type
      this.form.typeName = this.typeArr[type]
      this.form.name = ''
      this.form.address = ''
      this.form.mobile = ''
      this.form.bank = ''
      this.form.bankAccount = ''
      this.form.number = ''
      this.form.receiverMobile = ''
      this.form.receiverEmail = ''
      let $this = this
      setTimeout(function () {
        $this.$refs.myForm.clearValidate()
      }, 1000)
    },
    setDemo: function () {
      this.form = {
        name: '赵莉',
        number: 'OP6541146LA65646',
        bankAccount: '招商银行股份有限公司西安分行营业部320922132450880',
        addressMobile: '西安国际港务区港务大道、港务南路35号B654 02981270511'
      }
    },
    confirm: function (isClear) {
      var $this = this
      if ($this.form.type===1){
        $this.form.name=this.form.companyName
      }
      if (isClear) {
        $this.init()
        $this.callback({})
        $this.dialogVisible = false
        return
      }

      $this.$refs.myForm.validate((valid) => {
        if (valid) {
          if (typeof $this.callback === 'function') {
            $this.callback($this.form)
            $this.dialogVisible = false
            $this.form = {
              type: 0,
              typeName: '个人',
              name: '',
              number: '',
              mobile: '',
              bank: '',
              bankAccount: '',
              address: '',
              addressMobile: '',
              receiverMobile: '',
              receiverEmail: ''
            }
            $this.$forceUpdate()
          }
        } else {
          console.log('error submit')
          return false
        }
      })

    }
  }
}
</script>

<style>
#invoive-info-form .el-form-item__label {
  font-size: 12px;
}
</style>
